#@layout()
#define css()

#end
#define main()
<body>
<el-row id="app">
    <template>
        <el-tabs style="margin-top: 30px;margin-left: 30px" v-model="uploadImageTabsActiveName"
                 @tab-click="handleUploadImageTabsClick">
            <el-tab-pane label="文件提交" name="fileSubmit">
                <el-card>
                    <div>{{content}}</div>
                    <div>{{id}}</div>
                    <el-upload
                            class="avatar-uploader"
                            action="/image/upload"
                            :show-file-list="false"
                            :on-success="uploadContentPictureSuccess"
                            multiple
                    >
                        <el-button>上传内容图片</el-button>
                    </el-upload>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </template>
</el-row>
</body>
#end
#define script()
<script>
    var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    content: '尚未上传',
                    uploadImageTabsActiveName: 'fileSubmit',
                    id: '000',
                    imageUrlTextArea: '',
                    lazyImageUrlTextArea: '',
                    imageUploadLoading: false,
                    uploadImageList: [],
                    lazyUploadImageList: [],
                    uploadImageForm: {
                        pageNumber: 1,
                        pageSize: 10
                    }
                }
            },
            watch: {
                'form.content': function (val) {
                    this.setMarked();
                },
            },
            methods: {
                handleUploadImageTabsClick() {
                    this.getLazyUploadImageList()
                },
                getLazyUploadImageList() {
                    axios.post("/image/listImageFromUrl", this.uploadImageForm).then(function (response) {
                        if (response.data.code != 200) {
                            vm.$message.error(response.data.mess);
                        } else {
                            vm.uploadImageForm.pageNumber = response.data.data.pageNumber;
                            vm.uploadImageForm.totalRow = response.data.data.totalRow;
                            vm.lazyUploadImageList = response.data.data.list;
                        }
                    });
                },
                uploadContentPictureSuccess(res, file) {
                    this.$message('上传成功：' + res);
                    this.content = '上传成功：';
                    this.id = res;
                },
                submitImageUrl() {
                    console.log(this.imageUrlTextArea)
                    this.imageUploadLoading = true;
                    axios.post("/image/submitImageByUrl", {imageUrlStr: this.imageUrlTextArea}, {timeout: 300000}).then(function (response) {
                        if (response.data.code != 200) {
                            vm.$message.error(response.data.mess);
                        } else {
                            var resultIdStr = '';
                            vm.uploadImageList = response.data.data;
                            for (var i in vm.uploadImageList) {
                                resultIdStr += vm.uploadImageList[i].id + '\n';
                            }
                            vm.imageUrlTextArea = resultIdStr
                        }
                        vm.imageUploadLoading = false
                    }).catch((msg) => {
                        console.log(msg)
                        if (('' + msg).indexOf("timeout")) {
                            vm.$message.error('提交超时，请减少数量');
                        } else {
                            vm.$message.error('错误');
                        }
                        vm.imageUploadLoading = false
                    });
                },
                submitLazyImageUrl() {
                    console.log(this.imageUrlTextArea)
                    this.imageUploadLoading = true;
                    axios.post("/image/submitLazyImageByUrl", {imageUrlStr: this.lazyImageUrlTextArea}, {timeout: 300000}).then(function (response) {
                        if (response.data.code != 200) {
                            vm.$message.error(response.data.mess);
                        } else {
                            vm.$message.success("提交成功");
                            vm.getLazyUploadImageList()
                        }
                        vm.imageUploadLoading = false
                    }).catch((msg) => {
                        console.log(msg)
                        if (('' + msg).indexOf("timeout")) {
                            vm.$message.error('提交超时，请减少数量');
                        } else {
                            vm.$message.error('错误');
                        }
                        vm.imageUploadLoading = false
                    });
                }
            },
            mounted: function () {
            }
        }
    )
</script>


#end